<template>
	<div class="cun-she-ju">
		<div class="header">
			<div class="header-content">
				荆竹村归原小镇是集野奢度假酒店、精品民宿客栈、天坑自然地理奇观、文创艺术体验、亲子农场体验于一体的乡村旅游目的地。景区发挥对仙女山、白马山的“联动作用”，通过文创业、旅游业、农业、高端院墅等多业态的融合，呈现全方位体验式的休闲场景，打造国内最具价值的康养度假圣地，是实现都市人诗意田园、躬耕南阳的“归原”之梦的首选之地。归原小镇民宿聚落由好院子、慢屋、雪漫山、观梦和等风五大民宿组成，破旧的老房在建筑师们的妙手回春之下，于云海之端，建起了这一座座远离尘嚣的梦想之屋。藏在万亩森林中的一幢幢精致民宿，也成为回归田园的好去处。
			</div>
			<el-image class="cover" fit="cover" src="https://sms-1302634640.cos.ap-chengdu.myqcloud.com/cloud-jingzhu/three-level/xiangsu/guiyuan/1.png " />
		</div>
		<div class="body">
			<div class="title">归原乡宿推荐</div>
			<div class="list">
				<JiuDianItem :detail="item" v-for="(item, index) in list" :key="index" />
			</div>
		</div>
	</div>
</template>
<script setup lang="ts" name="MinSu2">
import { useBaseStore } from "@/store/base";
import JiuDianItem from "./JiuDianItem.vue";

const { cosPrefix } = useBaseStore();
const list = [
	{
		name: "归原·风鸣谷帐篷营地活动",
		bannerList: [
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/fengminggu/1.png",
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/fengminggu/2.png",
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/fengminggu/3.png",
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/fengminggu/4.png"
		],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·观梦民宿内景",
		bannerList: [cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/guanmeng/1.png", cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/guanmeng/2.png"],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·旅居宿集外景",
		bannerList: [cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/lvju/1.png", cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/lvju/2.png"],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·慢屋民宿内景",
		bannerList: [
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/manwu/1.jpg",
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/manwu/2.jpg",
			cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/manwu/3.jpg"
		],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·青年旅社内景",
		id: 5,
		bannerList: [cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/qingnianlvshe/1.jpg"],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·山居美宿内景",
		bannerList: [cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/shanjumeisu/1.png", cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/shanjumeisu/2.png"],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·汀樾山澜内景",
		bannerList: [cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/tingyue/1.png", cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/tingyue/2.png"],
		href: "http://www.lygyxz.com/listy-21.html"
	},
	{
		name: "归原·雪漫山民宿内景",
		bannerList: [cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/xuemanshan/1.png", cosPrefix + "three-level/xiangsu/guiyuan/jiudiantuijian/xuemanshan/2.png"],
		href: "http://www.lygyxz.com/listy-21.html"
	}
];
</script>
<style lang="scss" scoped>
.cun-she-ju {
	padding: 40px 320px;
	.search {
		display: flex;
		font-size: 20px;
		color: #000000;
		.s-btn {
			color: #ffffff;
			background-color: #8a1313;
		}
	}
}
.header {
	display: flex;
	.header-content {
		padding-right: 40px;
		font-size: 18px;
		line-height: 30px;
		text-indent: 32px;
	}
	div {
		flex: 1;
		font-size: 16px;
		color: #333333;
	}
	.cover {
		width: 640px;
		height: 290px;
	}
}
.body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	.title {
		margin: 40px;
		font-size: 24px;
		font-weight: bold;
		color: #101010;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
	}
}

@media all and (max-width: 750px) {
	.cun-she-ju {
		padding: 16px;
		.header {
			flex-direction: column-reverse;
			.cover {
				width: 100%;
			}
			.header-content {
				padding: 0;
			}
		}
		.list {
			width: 100%;
		}
	}
}
</style>
